#cmpt_messagebox {
  position: relative;
  height: 0;
  width: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
  pointer-events: none;

  &.active {
    opacity: 1;
    pointer-events: all;
  }

  #cmpt_messagebox_content {
    position: fixed;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 100px;
    min-width: 300px;
    max-width: 700px;
    width: 28%;
    padding: 0.2rem 0.5rem;

    background-color: rgb(247, 247, 247);
    border: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;

    header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      border-bottom: 1px solid #0000000f;
      padding: 0.25rem 0;
    }

    main {
      padding: 0.125rem 0;
      min-height: 3rem;
    }

    footer {}
  }
}